<template>
	<view>
		<u-sticky>
			<view class="Topbg u-flex " style="padding: 20rpx;">
				<view style="width: 700rpx;">
					<u-search placeholder="搜索商品" v-model="initial.parm.keyword" :animation="true" bg-color="#fff"
						border-color="#333" :action-style="{color:'#818DFF',}" @focus="focus" @blur="blur" @custom="search" @search="search">
					</u-search>
				</view>
				<view class="" v-if="ismore" @click="Clknew">
					<u-icon name="grid" color="#333" size="50" :custom-style="{marginLeft:'20rpx'}"></u-icon>
				</view>
			</view>
		</u-sticky>



		<!-- banner -->

		<u-swiper :list="banner"  name="cover" height="400" mode="dot" @click="clkBanner(item)"></u-swiper>

		<!--  -->



		<u-grid :col="4" :border="false">
			<u-grid-item v-for="(item,index) in classList" :key="index" index="item" @click="clickGrid(item,index)">
				<u-image :src="item.cover" width="100" height="100"></u-image>
				<view class="grid-text">{{item.classifyName}}</view>
			</u-grid-item>
		</u-grid>

		<!-- 秒杀专区 -->
		
		

        
		<view class="flashRow" >
			<view class="u-padding-20 u-flex u-row-between u-row-center">
				<view class="u-flex">
					<image src="../../static/flash_icon.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="u-margin-left-10  u-font-weight" style="font-size: 34rpx;" >限量秒杀</view>
				</view>
				<view class="$u-type-info" @click="go_flash">全部</view>
			</view>
			<view style="display:flex;overflow-x: scroll;">
				<view style="width: 120rpx;text-align: center;margin-left: 30rpx;margin-bottom: 30rpx;" v-for="(item,index) in flashList"
				 :key="index" @click="product_detail(item)">
					<u-image :src="item.cover" width="120" height="120" border-radius="20"></u-image>
					<view class="u-text-left u-margin-top-10">
						<view class="$u-type-error u-font-sm">￥{{item.price}}</view>
						<view class="$u-type-info u-font-xs" >仅剩:{{item.sku}}</view>
					</view>
				</view>
			</view>
		</view>



         <!-- 拼团 -->
		 <view class="u-padding-20 u-flex u-row-between u-row-center">
		 	<view class="u-flex">
		 		<image src="../../static/brand_icon.png" style="width: 40rpx;height: 40rpx;"></image>
		 		<view class="u-margin-left-10  u-font-weight" style="font-size: 34rpx;" >品牌拼团</view>
		 	</view>
			<view class="$u-type-info" @click="go_pt">全部</view>
		 </view>
		 
		<view>
			<goods :list="list" @go="go"></goods>
		</view>
		
		
		<view class="carblock" @click="gocar">
			<view style="position: relative;top: 10rpx;">
				<u-icon name="shopping-cart" :size="60"></u-icon>
				<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
			</view>
			<view>
				购物车
			</view>
		</view>

        <flashpoup  ref="flashpoups" :list='flashList' v-if="flashList.length" ></flashpoup>
<backTop></backTop>

		<u-loadmore :status="initial.status" />
	</view>
</template>


<script>
	import goods from "./components/goods.vue";
	import loader from '@/common/loadPage.js';
	import flashpoup from '@/components/flashpoup';
	import backTop from '../../components/backTop';
	
	
	import {

		mapState,

		mapMutations

	} from 'vuex';

	export default {
		components: {
			goods,
			flashpoup,
			backTop,
		},
		computed: {

			...mapState(['classCurrent',"userInfo"])

		},

		mixins: [loader],
		data() {
			return {
				ismore: true,
				list: [],
				initial: {
					geturl: "/index/goods",
					parm: {
						goods_type:2, //拼团
						keyword:""
					},
					isPage: true
				},
				banner: [],
				classList: [],
				count: "",
				flashList:[],//秒杀
			}
		},
		onLoad() {
			
			this.getBanner()
			this.getclass()
			this.getGoods()
			
			this.getFlash()
			
			setTimeout(()=>{
				if(this.userInfo){
					this.$refs.flashpoups.show=true;
				}
				
				
			},1000)
			
		},
		onShow() {
			this.carnum()
		},
		methods: {
			search(e){
				uni.navigateTo({
					url:'/pages/shop/shopList?keyword='+e
				})
			},
			go_flash(){
				uni.navigateTo({
					url:'/else/flash/index'
				})
			},
			go(item){
				uni.navigateTo({
					url:'/else/pt/detail?id='+item.id
				})
			},
			go_pt(){
				uni.navigateTo({
					url:'/else/pt/index'
				})
			},
			
			carnum() {
				this.$u.api.carNum().then(res => {
					this.count = res.cart
				})
			},
			getclass(){
				this.$u.post('/index/goodsClassify', {
                     type:1,
					 limit:7
				}).then(res => {
					
					this.classList = res;
					this.classList.push({
						cover: "/static/shopClass.png",
						classifyName: "更多"
					})

				}).catch(err => {

				})

			},
			product_detail(item){
				uni.navigateTo({
					url:"/else/flash/detail?id="+item.id
				})
			},
			// 秒杀
			getFlash() {
				this.$u.post('/index/goods', {
						goods_type:3 ,//拼团
						limit:4
				}).then(res => {
					this.flashList=res;
					this.$refs.chilren.show=true;
					
				}).catch(err => {})
			},
			getBanner() {
				this.$u.post('/index/banner', {
					"classify": 2
				}).then(res => {
					this.banner = res;
				}).catch(err => {})
			},
			
			clkBanner(item) {
				var id = this.banner[item].link
				if (id.indexOf("http") == -1) {
					uni.navigateTo({
						url: id
					})
				} else {
					uni.navigateTo({
						url: "../web/index?src=" + id
					})
				}
			},
			
			focus() {
				this.ismore = false
			},
			blur() {
				this.ismore = true
			},
			Clknew() {
				uni.navigateTo({
					url: "./classify"
				})
			},
			clickGrid(item, index) {
				if(item.classifyName=='更多'){
					uni.navigateTo({
						url: "./classify"
					})
					return
				}
				uni.navigateTo({
					url: "./classify?current="+index+"&id="+item.id
				})


			},
			gocar(){
				uni.navigateTo({
					url:"./car"
				})
			},
			

		}
	}
</script>

<style>
	.Topbg {
		background: #FFFFFF;
	}
	.more{
		width: 120rpx;
		height: 48rpx;
	     right: 40rpx;
		 line-height: 48rpx;
	 
	  color: #818DFF;
		border: 1rpx solid #818DFF;
		box-sizing: border-box;
		border-radius: 50rpx;
		text-align: center;
		position: absolute;
	}
	
	.carblock {
		position: fixed;
	
		height: 80rpx;
		right: 0;
		bottom: 200rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 40rpx 0px 0px 40rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}
	
	.flashRow{
		background: #F8F8F8;
		width: 700rpx;
		margin: auto;
		border-radius: 20rpx;
	}
	
	.grid-text{
		margin-top: 10rpx;
	}
	
</style>
